<template>
    <div class="stepFive">
        <step-bar step="4"/>
        <div class="show-report">
            <van-button size="mini" @click="showReport" v-if="resultVisible">查看报告</van-button>
        </div>
        <div class="flex-box">
            <header>
                <head-info ref="headInfo" :name="$storage.get('taxDiscount').companyName" :over="resultVisible" />
            </header>
            <main>
                <div class="prompt" v-if="promptVisible">
                    <p>根据目前提供的条件，企业暂时还不能享受该项优惠政策请持续关注，新政策上线后可继续查询</p>
                </div>
                <div class="policy" v-if="resultVisible">
                    <p class="title">根据条件，企业暂时可享受<span class="policy-name">“{{resultData.projectTitle}}”</span>优惠政策</p>
                    <ul class="file-list">
                        <li v-for="(item,index) in resultData.policys" :key="index">
                            {{item.policyTitle}}
                            <van-button class="download" size="mini" :url="item.policyUrl">立即下载</van-button>
                        </li>
                    </ul>
                    <div class="is-enjoy">
                        <p class="question">企业是否已享受该政策？</p>
                        <van-radio-group class="radio-box" v-model="isEnjoy" @change="toggleEnjoy">
                            <van-radio class="radio-item" name="01">是，已享受</van-radio>
                            <van-radio class="radio-item" name="00">否，我没有享受该项优惠</van-radio>
                        </van-radio-group>
                    </div>
                </div>
            </main>
            <footer>
                <div class="btn-box">
                    <p class="more-info"><span>*</span> 如需查询其他企业请重新进入系统进行查询</p>
                    <van-button class="go-on" type="info" @click="goQueryOther">继续查询其他优惠政策</van-button>
                    <van-button  class="apply" type="info" @click="applyShow = true">申请优惠咨询服务</van-button>
                </div>
            </footer>
        </div>
        <a class="service" @click="goService"></a>
        <!-- 申请服务弹框 -->
        <van-dialog
            v-model="applyShow"
            title="申请优惠咨询服务"
            :show-confirm-button="isVisible"
            >
            <van-icon name="clear" class="close-btn" @click="applyShow = false"/>
            <div class="form-box">
                <p class="name">
                    <van-field v-model="form.name" placeholder="请输入姓名" />
                </p>
                <p class="phone">
                    <van-field v-model="form.phone" placeholder="请输入联系电话" max-length="11"/>
                </p>
                <van-button class="apply-btn" @click="submitInfo('100005')">提交联系信息</van-button>
            </div>
        </van-dialog>
        <!-- 提示成功弹框 -->
        <van-dialog 
            v-model="successShow"
            :show-confirm-button="isVisible"
            >
            <div class="info-box">
                <p class="info">联系信息已提交成功<br> 稍后会有专业顾问与您联系，请保持手机畅通</p>
                <van-button class="apply-btn" @click="successShow = false">我知道了</van-button> 
            </div>
        </van-dialog>
        <!-- 查看报告 -->
        <van-popup v-model="reportShow" class="popup" :close-on-click-overlay="isVisible">
                <p class="title">优惠政策查询报告<van-icon name="clear" class="close-btn" @click="closeReport"/></p>
                <div class="content">
                    <h3>{{reprotData.enterpriseName}}</h3>
                    <p class="time">您已进行<span> {{reprotData.searchCount}} </span>次查询，可享受<span> {{reprotData.enjoyCount}} </span>项优惠政策</p>
                    <ul class="enjoy-policy">
                        <li v-for="(item,index) in reprotData.projectTitles" :key="index"><span>{{index+1}}</span>{{item}}</li>
                    </ul>
                    <div class="enjoy-more">
                        <p>除上述的优惠政策外，如果写企业已经享受了其它的优惠政策，请您填写：</p>
                        <van-field
                            v-model="moreEnjoyInfo"
                            type="textarea"
                            placeholder="请输入企业已经享受的优惠政策..."
                            rows="3"
                            autosize
                        />
                    </div>
                    <van-button class="apply-btn" @click="nowApply">申请优惠政策服务</van-button>
                    <p class="info">请持续关注，新政策上线后可继续查询</p>
                </div>
        </van-popup>
    </div>
</template>

<script>
import qs from 'qs'
import { Toast } from 'vant'
export default {
    data() {
        return {
            isVisible: false,
            promptVisible: false,
            resultVisible: false,
            isEnjoy: '',
            applyShow: false,
            form: {
                name: '',
                phone: ''
            },
            reportShow: false,
            moreEnjoyInfo: '',
            reprotData: {},
            successShow: false
        }
    },
    created() {
        if(this.$route.params.resultId){
            this.$storage.add('taxDiscount','resultId',this.$route.params.resultId)
        }
         this.getResultData()
         this.getReportData()
    },
    computed: {
        resultId() {
          return this.$route.params.resultId?this.$route.params.resultId:this.$storage.get('taxDiscount').resultId
        },
        userId() {
            return this.$storage.get('taxDiscount').userId
        }
    },
    methods: {
        goService() {
            this.$router.direction = 'left'
            this.goTo('service')
        },
         //获取查询结果
       getResultData() {
            const data = {
                discountResultId: this.resultId
            }
            this.$axios
            .post(this.API.policyMeet,data)
            .then(res => {
                if(res.data.code == 100) {
                    this.resultData = res.data.data
                    if(this.resultData.resultType == '00'){
                        this.resultVisible = true
                    }else{
                        this.promptVisible = true
                    }
                }else{
                    Toast(res.data.mesg)
                }
            })
            .catch(err => {
                // console.log(err)
            }); 
        },
         //获取报告数据
        getReportData() {
            const data = {
                userId: this.userId
            }
            this.$axios
            .post(this.API.getSearchResult,data)
            .then(res => {
                if(res.data.code == 100) {
                    this.reprotData = res.data.data
                }else{
                    Toast(res.data.mesg)
                }
            })
            .catch(err => {
                // console.log(err)
            }); 
        },
         //提交联系信息
        submitInfo(viewId) {
           if(viewId){
              this.accessRecord(viewId)
           }
            if(!this.form.name) {
               Toast('请输入联系人姓名')
               return
           }
           if(!this.form.phone) {
                Toast('请输入联系电话')
                return
            }else {
                const reg1 = /^\d+$/g
                const reg2 =  /^1(3|4|5|6|7|8|9)\d{9}$/g
                if (!reg1.test(this.form.phone)) {
                    Toast('联系电话请输入数字')
                    return
                }
                if (!reg2.test(this.form.phone)) {
                    Toast('请输入正确格式的联系电话')
                    return
                }
            }
            const data = {
                phone: this.form.phone,
                contact: this.form.name,
                source: '01',
                userId: this.userId
            }
            this.$axios
            .post(this.API.userApply,data)
            .then(res => {
                if(res.data.code == 100) {
                    this.applyShow = false
                    this.successShow = true
                    setTimeout(() => {
                        this.form.name = ''
                        this.form.phone = ''
                    },300)
                }else{
                    Toast(res.data.mesg)
                }
            })
            .catch(err => {
                // console.log(err)
            });  
        
        },
         //是否享受优惠政策
        toggleEnjoy(val) {
            const data = {
                discountResultId: this.resultId,
                isEnjoy: val
            }
            this.$axios
                .post(this.API.isEnjoyDiscount,data)
                .then(res => {
                    if(res.data.code == 100) {
                        
                    }else{
                        Toast(res.data.mesg)
                    }
                })
                .catch(err => {
                    // console.log(err)
            }); 
        },
          //确认并关闭报告
       closeReport() {   
           this.reportShow = false
           if(this.moreEnjoyInfo != '') {
                const data = {
                    userId: this.userId,
                    otherPolicy: this.moreEnjoyInfo
                }
                this.$axios
                    .post(this.API.enjoyOther,data)
                    .then(res => {
                        if(res.data.code == 100) {
                            
                        }else{
                            Toast(res.data.mesg)
                        }
                    })
                    .catch(err => {
                        // console.log(err)
                }); 
           }
       },
        showReport() {
            this.reportShow = true
            this.accessRecord('100003')
        },
        //立即申请
        nowApply() {
            this.applyShow = true
            this.accessRecord('100004')
        },
        //继续查询其他优惠
        goQueryOther() {
            this.$router.direction = 'right'
            this.goTo('stepThree')
        }
    }
}
</script>

<style lang="less" scoped>
@themeColor: #6c52fb;
.stepFive {
    overflow: hidden;
    padding-top: 90px;
    height: 100%;
    .flex-box {
        display: flex;
        flex-direction: column;
        height: 100%;
        main {
            position: relative;
            flex: 1;
            width: 100%;
            overflow-y: scroll;
        }
        footer {
            height: 180px;
        }
    }
    .show-report {
        position: absolute;
        right: 25px;
        top: 145px;
        background-color: #fbb552;
        border-radius: 6px;
        z-index: 999;
    }
    .prompt {
        width: 90%;
        margin: 0 auto;
        background: url('../assets/imgs/app/result_icon.png') no-repeat center 200px;
        background-size: 100px 100px;
        padding-top: 350px;
        p {
            text-align: center;
            font-size: 28px;
            color: #777;
            line-height: 40px;
        }
    }
    .policy {
        width: 100%;
        background-color: #fff;
        padding: 50px 35px 35px;
        &::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 16px;
            background-color: #f5f5f5;
            top: 0;
            left: 0;
        }
        .title {
             font-size: 28px;
             color: #333333;
            .policy-name {
                color: @themeColor;
            } 
        }
        .file-list {
            margin: 20px 0 60px;
            li {
                padding: 30px 20px 30px 80px;
                background: url('../assets/imgs/app/file_icon.png') no-repeat 16px center;
                background-size: 38px 50px;
                background-color: #f5f5f5;
                font-size: 24px;
                color: #333333;
                .download {
                    background-color: #fdb44d;
                    color: #fff;
                    font-size: 18px;
                    border-radius: 6px;
                    width: 120px;
                    height: 45px; 
                    line-height: 42px;
                    margin-left: 10px;
                }
            }
        }
    }
    .is-enjoy {
        .question {
            font-size: 30px;
            color: #333333;
        }
        .radio-box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 40px;
            .radio-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
               color: #666666;
            }
        }
    }
    .btn-box {
        width: 100%;
        height: 180px;
        padding: 20px 35px 30px;
        .more-info {
            color: @themeColor;
            font-size: 24px;
            margin-bottom: 20px;
            span{
                color: #f00;
            }
        }
        .go-on,.apply {
            width: 49%;
            height: 80px;
            border: 0;
            font-size: 30px;
            border-radius: 6px;
            line-height: 78px;
        }
        .go-on {
            background-color: @themeColor;
        }
        .apply {
            background-color: #fdb44d;
        }
    }
    .service {
        position: absolute;
        right: 40px;
        bottom: 200px;
        width: 154px;
        height: 154px;
        background: url('../assets/imgs/app/service_icon.png') no-repeat;
        background-size: 154px 154px;
        z-index: 999;
    }
    .popup {
        width: 90%;
        border-radius: 6px;
        .title {
            background-color: #eae6fe;
            color: @themeColor;
            padding: 20px 0;
            text-align: center;
            font-size: 32px;
            position: relative;
        }
        .content {
            padding: 30px 30px 50px;
            h3 {
                color: @themeColor;
                font-size: 30px;
                background: url('../assets/imgs/app/head_info_icon.png') no-repeat left center;
                background-size: 32px 26px;
                padding-left: 40px;
            }
            .time {
                padding-left: 40px;
                margin: 30px 0 15px 0;
                font-size: 24px;
                color: #333333;
                span {
                    color: @themeColor;
                }
            }
            .enjoy-policy {
                padding: 20px 10px;
                background-color: #f5f5f5;
                li {
                    font-size: 24px;
                    color: #333333;
                    padding-left: 40px;
                    position: relative;
                    &:not(:last-child) {
                        margin-bottom: 30px;
                    }
                    span {
                        position: absolute;
                        background-color: @themeColor;
                        width: 28px;
                        height: 28px;
                        font-size: 18px;
                        color: #fff;
                        left: 0;
                        top: 4px;
                        text-align: center;
                        line-height: 28px;
                    }
                }
                
            }
            .enjoy-more {
                margin: 30px 0 50px;
                font-size: 28px;
                color: #666666;
                p {
                    margin-bottom: 15px;
                }
            }
            .info {
                font-size: 24px;
                color: #fdb044;
                margin-top: 20px;
                text-align: center;
            }
        }
    }
    .apply-btn {
        width: 100%;
        background-color: @themeColor;
        color: #ffffff;
        font-size: 30px;
    }
}
</style>

<style lang="less">
@themeColor: #6c52fb;
.stepFive {
    .show-report {
        .van-button {
            border: 0;
            color: #fff;
            background-color: #fbb552;
            width: 120px;
            height: 45px;
            line-height: 42px;
            font-size: 24px;
        }
    }
    .van-dialog {
        .van-dialog__content {
            .close-btn {
                position: absolute;
                color: #bbbbbb;
                right: 30px;
                top: 30px;
                font-size: 38px;
            }
            .form-box {
                padding: 0 35px;
                margin: 60px 0 0;
                .van-field {
                    height: 80px;
                    border-radius: 6px;
                    font-size: 28px;
                    padding: 10px 15px 10px 75px;
                    .van-field__body {
                        height: 100%;
                    }
                }
                .name {
                    background-color: #f5f5f5;
                    .van-field {
                        background: url('../assets/imgs/app/name_icon.png') no-repeat 20px center;
                        background-size: 26px 30px;
                    }
                }
                .phone {
                    background-color: #f5f5f5;
                    margin: 30px 0 70px;
                    .van-field {
                        background: url('../assets/imgs/app/phone_icon.png') no-repeat 20px center;
                        background-size: 20px 30px;
                    }
                }
            }
            .info-box {
                padding: 240px 30px 0;
                background: url('../assets/imgs/app/success_icon.png') no-repeat center 100px;
                background-size: 100px 100px;
                text-align: center;
                p {
                    color: #999999;
                    font-size: 28px;
                    margin-bottom: 80px;
                }
            }
        }
        .van-dialog__footer {
            padding: 0 35px 60px; 
            .van-button {
                height: 80px;
                background-color: @themeColor;
                color: #fff;
                line-height: 80px;
                font-size: 30px;
            }
        }
    }
    .enjoy-more {
        .van-cell {
            padding: 8px 15px;
            font-size: 24px;
            border: 1px solid #bbbbbb;
        }
    }
    
}

</style>



